<template>
    <el-container>
        <el-header>
            <el-button size="small" @click="createModeler">创建模型</el-button>
            <el-button size="small" @click="saveModeler">保存模型</el-button>
            <el-button size="small" @click="downloadModeler">下载模型</el-button>
            <el-button size="small" @click="downloadSvg">下载SVG</el-button>
        </el-header>
        <el-main>
            <div id="bpmnContainer"></div>
            <div id="properties"></div>
        </el-main>
    </el-container>
</template>

<script>
    import BpmnModeler from 'bpmn-js/lib/Modeler';
    import propertiesPanelModule from 'bpmn-js-properties-panel'
    import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
    import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
    import customTranslate from '../../il8n/customTranslate'
    import BmpnXml from '../../assets/diagram.bpmn'
    import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
    import 'bpmn-js/dist/assets/diagram-js.css'
    import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'

    export default {
        name: "ModelerBuilder",
        data() {
            return {
                modeler: {}
            }
        },
        methods: {
            createModeler() {
                this.modeler.importXML(BmpnXml);
            },
            async saveModeler() {
                let xml = this.downloadModeler();
                localStorage.setItem("xml-bpmn", await xml);
                this.$message.success("保存成功");
            },
            async downloadModeler() {
                const {xml} = await this.modeler.saveXML({format: true});
                console.log(xml)
                return xml;
            },
            async downloadSvg() {
                const {svg} = await this.modeler.saveSVG();
                console.log(svg)
            }
        },
        mounted() {
            let customTranslateModule = {
                translate: [ 'value', customTranslate ]
            };
            let modeler = new BpmnModeler({
                container: '#bpmnContainer',
                additionalModules: [
                    propertiesPanelModule,
                    propertiesProviderModule,
                    customTranslateModule
                ],
                propertiesPanel: {
                    parent: '#properties'
                },
                moddleExtensions: {
                    camunda: camundaModdleDescriptor
                }
            });
            this.modeler = modeler;
            let xml = localStorage.getItem("xml-bpmn");
            if (xml){
                modeler.importXML(xml);
            } else {
                modeler.importXML(BmpnXml);
            }
        }
    }
</script>

<style scoped>
    #bpmnContainer {
        height: 90%;
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
    }

    #properties {
        width: 400px;
        height: 80%;
        position: absolute;
        right: 0;
        /*top: 120px;*/
        overflow-y: scroll;
    }

    .el-header {
        line-height: 60px;
        text-align: right;
        z-index: 3000;
    }
</style>
